<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>

    // 预先设置一个变量来存MediaRecorder实例
    let mediaRecorder = null;
    // 首先打开麦克风
    navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
      let chunks = [];
      mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.start();

      // 录音开始事件监听（即调用 mediaRecorder.start()时会触发该事件）
      mediaRecorder.onstart = () => {
        console.log("record start")
      }

      // 录音可用事件监听，发生于mediaRecorder.stop()调用后，mediaRecorder.onstop 前
      mediaRecorder.ondataavailable = (e) => {
        console.log("dataavailable")
        console.log(e)
        chunks.push(e.data)
      }

      // 录音结束事件监听，发生在mediaRecorder.stop()和 mediaRecorder.ondataavailable 调用后
      mediaRecorder.onstop = () => {
        console.log("record end")
        // 获取到录音的blob
        let blob = new Blob(chunks, { type: "audio/webm;codecs=opus" });

        //  将blob转换为file对象，名字可以自己改，一般用于需要将文件上传到后台的情况
        let file = new window.File([blob], "record.webm");

        // 将blob转换为地址，一般用于页面上面的回显，这个url可以直接被 audio 标签使用
        let url = (window.URL || webkitURL).createObjectURL(blob);
      }
    })

    // 录音结束事件，在需要结束录音时调用，录音结束后的操作请在 mediaRecorder.onstop 里面写
    mediaRecorder && mediaRecorder.stop()

  </script>
</body>

</html>